<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加会员</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="/app/admin/component/layui/css/layui.css" />
    <style>
        .main-container {
            padding: 15px 15px 15px 75px;
            background: #f2f2f2;
            min-height: 100vh;
        }
        .form-container {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            max-width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <?php include base_path() . '/plugin/ky_shouyin/app/view/layout/leftmenu.html'; ?>
    
    <div class="main-container">
        <div class="form-container">
            <form class="layui-form" lay-filter="addMemberForm">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">会员卡号</label>
                            <div class="layui-input-block">
                                <input type="text" name="card_no" required lay-verify="required" placeholder="输入会员卡号(F2)" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">会员姓名</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" required lay-verify="required" placeholder="输入会员姓名" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号码</label>
                            <div class="layui-input-block">
                                <input type="text" name="phone" placeholder="输入会员手机号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">生日</label>
                            <div class="layui-input-block">
                                <input type="text" name="birthday" id="birthday" placeholder="选择生日日期" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">会员等级</label>
                            <div class="layui-input-block">
                                <select name="level" required lay-verify="required">
                                    <option value="">请选择会员等级</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">所属店铺</label>
                            <div class="layui-input-block">
                                <select name="store_id" required lay-verify="required">
                                    <option value="">请选择所属店铺</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">会员密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" placeholder="输入会员密码" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">确认密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="confirm_password" placeholder="再次输入会员密码" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">售卡工本费</label>
                            <div class="layui-input-block">
                                <input type="number" name="card_fee" required lay-verify="required" value="0" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">账户余额</label>
                            <div class="layui-input-block">
                                <input type="number" name="balance" value="0" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">账户积分</label>
                            <div class="layui-input-block">
                                <input type="number" name="points" value="0" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付方式</label>
                            <div class="layui-input-block">
                                <select name="payment_method">
                                    <option value="cash">现金</option>
                                    <option value="wechat">微信</option>
                                    <option value="alipay">支付宝</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">提成员工</label>
                            <div class="layui-input-block">
                                <select name="staff_id">
                                    <option value="">请选择提成员工</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">车牌号</label>
                            <div class="layui-input-block">
                                <input type="text" name="car_number" placeholder="输入会员车牌号" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" placeholder="输入会员详细地址" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注说明" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0;text-align: center;">
                        <button class="layui-btn" lay-submit lay-filter="addMember">确定</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="/app/admin/component/layui/layui.js"></script>
    <script src="/app/admin/component/pear/pear.js"></script>
    <script>
    layui.use(['layer', 'form', 'laydate'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,laydate = layui.laydate
            ,$ = layui.$;
        
        // 初始化日期选择器
        laydate.render({
            elem: '#birthday'
        });
        
        // 获取会员等级列表
        $.ajax({
            url: '/app/ky_shouyin/member/getLevels',
            success: function(res){
                if(res.code === 0) {
                    var html = '<option value="">请选择会员等级</option>';
                    res.data.forEach(function(item){
                        html += '<option value="'+ item.id +'">'+ item.name +'</option>';
                    });
                    $('select[name="level"]').html(html);
                    form.render('select');
                }
            }
        });
        
        // 获取店铺列表
        $.ajax({
            url: '/app/ky_shouyin/store/getList',
            success: function(res){
                if(res.code === 0) {
                    var html = '<option value="">请选择所属店铺</option>';
                    res.data.forEach(function(item){
                        html += '<option value="'+ item.id +'">'+ item.name +'</option>';
                    });
                    $('select[name="store_id"]').html(html);
                    form.render('select');
                }
            }
        });
        
        // 获取员工列表
        $.ajax({
            url: '/app/ky_shouyin/staff/getList',
            success: function(res){
                if(res.code === 0) {
                    var html = '<option value="">请选择提成员工</option>';
                    res.data.forEach(function(item){
                        html += '<option value="'+ item.id +'">'+ item.name +'</option>';
                    });
                    $('select[name="staff_id"]').html(html);
                    form.render('select');
                }
            }
        });
        
        // 提交表单
        form.on('submit(addMember)', function(data){
            // 验证两次密码是否一致
            if(data.field.password !== data.field.confirm_password) {
                layer.msg('两次输入的密码不一致');
                return false;
            }
            
            $.ajax({
                url: '/app/ky_shouyin/cashier/createMember',
                type: 'POST',
                data: data.field,
                success: function(res){
                    if(res.code === 0) {
                        layer.msg('添加成功', {
                            icon: 1,
                            time: 1000
                        }, function(){
                            // 重置表单以便继续开卡
                            $('form')[0].reset();
                            form.render();
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
    </script>
</body>
</html> 